<template>
<div>
  <el-input
    class="systemInput"
    @click.native="openFlow"
    v-model="wfNames"
  ></el-input>

  <div v-if="visible"
       class="wfDialogClass"
       :style="wfStyle">
    <el-radio-group v-model="wfType"
                    @change="wfTypeChange">
      <el-radio :label="3">部分</el-radio>
      <el-radio :label="6">全部</el-radio>
      <el-radio :label="9">禁用</el-radio>
      <el-radio :label="12">忽略</el-radio>
    </el-radio-group>
    <div class="wfMapStyle"
         v-for="item in wfMap"
         :key="item.id"
         :value="item.id">
      <span class="wfName">{{ item.name }}</span>
      <el-checkbox class="wfCheckbox"
        style="font-size: 22px"
        :disabled="wfChoosable"
        v-for="check in wfNodeMap[item.id]"
        v-model="wfCheckboxMap[check.code]"
        :key="check.code"
        :label="check.code"
        @change="wfNodeChange">{{ check.name }}
      </el-checkbox>
    </div>
  </div>
</div>
  
</template>

<script>
import { workflownode } from "@/system/api/flowManage";
export default {
  props: ["wf","wfPositionStyle","dataObj","btnIndex"],
  data () {
    return {
      wfNames: null,
      wfChoosable: false,
      wfCheckboxMap:{},
      wfType: 3,
      wfNode:[],
      wfMap:{},
      wfNodeMap:{},
      wfNodeMapHash:{},
      visible:false,
      wfStyle:'',
      checkVal:[]
    };
  },
  watch:{
    btnIndex(val){
      console.log('btnIndex')
      if(this.dataObj.wfNode){
        if(typeof(this.dataObj.wfNode) == 'object'){
            this.getWfNodeNames(this.dataObj.wfNode)
        }else if(typeof(this.dataObj.wfNode) == 'string'){
          // this.getWfNodeNames([this.dataObj.wfNode])
          this.getWfNodeNames(this.dataObj.wfNode.split(','))
        }
      }
    },
    dataObj(val){
      console.log('dataObj')
      if(val.wfNode){
        // console.log(typeof(val.wfNode))
        if(typeof(val.wfNode) == 'object'){
          this.getWfNodeNames(val.wfNode)
        }else if(typeof(val.wfNode) == 'string'){
          this.getWfNodeNames(val.wfNode.split(','))
          // this.getWfNodeNames([val.wfNode])
        }
      }
    }
  },
  // console.log()
  methods: {
    
    openFlow(e){
      console.log(e,this.wfCheckboxMap)
      
      let Y = e.clientY + 20;
      this.wfStyle = this.wfPositionStyle + "top:" + Y + "px;";
      this.wfCheckboxMap = {}
      // for (let key in this.wfCheckboxMap){
        // this.wfCheckboxMap[key] = false
         for (let item of this.checkVal) {
          // if(item == key){
            this.wfCheckboxMap[item] = true
          // }
        // }
      }

      console.log(this.wfCheckboxMap)

      setTimeout(() => {
        this.visible = true
      }, 250);
      // this.flowTestVisible = true
    },
    wfTypeChange (val) {
      if (val == 9) {
        //禁用
        this.wfChoosable = true;
        this.wfNode = [0];
        // this.$emit('update:wfNode',[0])
        this.wfNames = "禁用";
      } else if (val == 6) {
        this.wfNode = '999999';
        // this.$emit('update:wfNode',[999999])
        this.wfNames = "全部";
        this.wfChoosable = true;
      } else if (val == 12) {
        // this.$emit('update:wfNode',[-1])
        this.wfNode = [-1];
        this.wfNames = "忽略";
        this.wfChoosable = true;
      } else {
        this.wfChoosable = true;
        this.wfChoosable = false;
        let arr = [];
        let arr1 = []
        for (let id in this.wfCheckboxMap) {
          if (this.wfCheckboxMap[id] && this.wfNodeMapHash[id])
            arr.push(this.wfNodeMapHash[id]);
            // console.log(id)
            arr1.push(id)
        }
        this.wfNames = arr.join(",");
        this.wfNode = arr1
        // this.$emit('wfNode',arr1)
      }
      
      this.$emit('wfInfo',{wfNode:this.wfNode.join(','),wfNames:this.wfNames})
    },
    wfNodeChange () {
      // console.log(this.wfCheckboxMap)
      let arr = [];
      for (let key in this.wfCheckboxMap) {
        if (this.wfCheckboxMap[key] && this.wfNodeMapHash[key]) {
          arr.push(key);
        }
      }
      // console.log(arr)
      // this.wfNode = arr;
      // this.$emit('update:wfNode',arr)
      this.getWfNodeNames(arr);
    },
    getWfNodeNames (arr) {
      console.log('getWfNodeNames')
      this.checkVal = arr
      let names = []
      if (arr) {
        if (arr[0] == 0) {
          this.wfType = 9;
          this.wfNames = "禁用";
          this.wfChoosable = true;
        } else if (arr[0] == 999999) {
          this.wfNames = "全部";
          this.wfType = 6;
          this.wfChoosable = true;
        } else if (arr[0] == -1) {
          this.wfNames = "忽略";
          this.wfType = 12;
          this.wfChoosable = true;
        } else {

          this.wfChoosable = false;
          this.wfType = 3;
          console.log(arr,this.wfNodeMap)

          for (let wfClassId in this.wfNodeMap) {
            console.log(wfClassId)
            this.wfNodeMap[wfClassId].forEach((node) => {
              console.log(node)
              arr.forEach((currentNode) => {
                console.log(currentNode,node.code)
                if (node.code === currentNode) {
                  names.push(node.name)
                }
              });
            });
          }
          
          console.log(names)
          this.wfNames = names.join(',')

        }
        this.wfNode = arr
        // this.$emit('update:wfNode',arr)
        this.$emit('wfInfo',{wfNode:this.wfNode.join(','),wfNames:this.wfNames})
      }
      
    },
    globalClick () {
      document.addEventListener("click", (e) => {

        let wfDialogClass = document.getElementsByClassName("wfDialogClass")[0];
        if (wfDialogClass) {
          if (
            e.target.contains(wfDialogClass) ||
            wfDialogClass.contains(e.target)
          ) {
            this.visible = true;
          } else {
             this.visible = false;
          }
        }
      });
    },
    async getWfMap(map) {
      this.wfMap = map;
      this.wfMap.forEach((wf) => {
        workflownode({ classId: wf.wfClass }).then((res) => {
          if (res.success) {
            this.wfNodeMap[wf.id] = res.info;
            res.info &&
              res.info.map((item) => {
                this.wfNodeMapHash[item.code] = item.name;
              });
          }
        });
      });
    },
    async init(){
      
      await this.getWfMap(JSON.parse(JSON.stringify(this.wf)))
      setTimeout(()=>{
        if(this.dataObj.wfNode){
          if(typeof(this.dataObj.wfNode) == 'object'){
              this.getWfNodeNames(this.dataObj.wfNode)
          }else if(typeof(this.dataObj.wfNode) == 'string'){
            this.getWfNodeNames(this.dataObj.wfNode.split(','))
          }
        }
      },200)
      
      
      // console.log(this.dataObj)
    }
  },
  created: function () {
    this.globalClick();
  },
  mounted(){
    this.init()

    
    // console.log(this.wfNodeMap)
  }
};
</script>

<style scoped lang="scss">
.wfDialogClass {
  position: fixed;
  width: 270px;
  height: 320px;
  overflow: auto;
  background-color: #fff;
  box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.75);
  padding: 0 12px;
  padding-top: 12px;
  z-index:9999;

  .el-radio-group {
    width: 100%;
    text-align: left;

    .el-radio {
      margin-right: 8px;
    }
  }

  .wfMapStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 14px;

    .wfName {
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid #ccc;
      text-align: left;
      padding: 6px 0;
      color: rgb(153, 153, 153);
    }

    .el-checkbox ::v-deep .el-checkbox__label {
      font-size: 14px;
    }
  }
}
</style>